<template>
  <view
    class="add-card-container"
    :style="{ paddingBottom: safeAreaBottom + 'px' }">
    <!-- 页面标题栏 -->
    <view class="page-header">
      <view class="header-title">添加银行卡</view>
      <view class="empty-btn"></view>
      <!-- 占位，保持标题居中 -->
    </view>

    <!-- 表单容器：自适应宽度，避免输入框溢出 -->
    <form class="card-form" @submit="handleSubmit" report-submit>
      <!-- 1. 开户行输入框 -->
      <view class="form-item">
        <label class="form-label">开户行</label>
        <view class="input-wrapper">
          <input
            class="form-input"
            type="text"
            v-model="form.hospitalDeposit"
            placeholder="请输入开户行（如：招商银行北京朝阳支行）"
            @input="handleInput('hospitalDeposit')"
            maxlength="50" />
        </view>
        <!-- 错误提示 -->
        <text class="error-tip" v-if="errors.hospitalDeposit">
          {{ errors.hospitalDeposit }}
        </text>
      </view>

      <!-- 2. 公司名称输入框 -->
      <view class="form-item">
        <label class="form-label">公司名称</label>
        <view class="input-wrapper">
          <input
            class="form-input"
            type="text"
            v-model="form.hospitalCompany"
            placeholder="请输入公司名称（如：XX医疗科技有限公司）"
            @input="handleInput('hospitalCompany')"
            maxlength="50" />
        </view>
        <text class="error-tip" v-if="errors.hospitalCompany">
          {{ errors.hospitalCompany }}
        </text>
      </view>

      <!-- 3. 卡号输入框（带实时格式化：每4位空格） -->
      <view class="form-item">
        <label class="form-label">银行卡号</label>
        <view class="input-wrapper">
          <input
            class="form-input"
            type="tel"
            v-model="form.hospitalNumber"
            placeholder="请输入16-19位银行卡号"
            @input="handleCardNumberInput"
            maxlength="23" />
        </view>
        <text class="error-tip" v-if="errors.hospitalNumber">
          {{ errors.hospitalNumber }}
        </text>
      </view>

      <!-- 4. 开户行号输入框（数字限制） -->
      <view class="form-item">
        <label class="form-label">开户行号</label>
        <view class="input-wrapper">
          <input
            class="form-input"
            type="number"
            v-model="form.hospitalBankCode"
            placeholder="请输入开户行联行号"
            @input="handleInput('hospitalBankCode')" />
          <text class="helper-text">通常为数字，可联系银行查询</text>
        </view>
        <text class="error-tip" v-if="errors.hospitalBankCode">
          {{ errors.hospitalBankCode }}
        </text>
      </view>

      <!-- 提交按钮：未通过验证时禁用，加载中显示“提交中” -->
      <button
        class="submit-btn"
        form-type="submit"
        :disabled="!isFormValid || isSubmitting"
        :loading="isSubmitting">
        {{ isSubmitting ? "提交中..." : "确认添加" }}
      </button>
    </form>
  </view>
</template>

<script>
import * as nurseInfo from "../../common/api/nurseInfo.js";
export default {
  data() {
    return {
      // 表单数据
      form: {
        hospitalDeposit: "", // 开户行
        hospitalCompany: "", // 公司名称
        hospitalNumber: "", // 卡号
        hospitalBankCode: "", // 开户行号
      },
      // 错误提示
      errors: {},
      // 提交状态
      isSubmitting: false,
      // 底部安全区域高度（适配全面屏）
      safeAreaBottom: 0,
      uid: "", //医院ID
    };
  },
  computed: {
    // 表单是否通过基础验证（用于启用提交按钮）
    isFormValid() {
      const {
        hospitalDeposit,
        hospitalCompany,
        hospitalNumber,
        hospitalBankCode,
      } = this.form;
      // 基础校验：非空 + 卡号/开户行号格式初步匹配
      return !!(
        (
          hospitalDeposit.trim() &&
          hospitalCompany.trim() &&
          hospitalNumber.trim().replace(/\s/g, "").length >= 16 && // 卡号至少16位
          hospitalBankCode.trim().length
        ) // 开户行号固定
      );
    },
  },
  onLoad() {
    // 初始化：获取安全区域高度
    this.getSystemInfo();
  },
  methods: {
    // 1. 获取设备信息，适配安全区域
    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.safeAreaBottom = res.safeAreaInsets?.bottom || 0;
        },
      });
    },

    // 2. 普通输入框处理（开户行/公司名称/开户行号）
    handleInput(field) {
      // 清除对应字段的错误提示（输入时实时清除）
      if (this.errors[field]) {
        this.$set(this.errors, field, "");
      }
      // 开户行号：仅保留数字（过滤非数字字符）
      if (field === "hospitalBankCode") {
        this.form.hospitalBankCode = this.form.hospitalBankCode.replace(
          /\D/g,
          ""
        );
      }
    },

    // 3. 卡号输入处理：实时格式化（每4位加空格）
    handleCardNumberInput() {
      // 清除非数字字符 + 去除已有空格
      let pureNumber = this.form.hospitalNumber
        .replace(/\D/g, "")
        .replace(/\s/g, "");
      // 每4位加一个空格（如：6226 0912 3456 7890）
      let formattedNumber = pureNumber.replace(/(\d{4})(?=\d)/g, "$1 ");
      // 更新绑定值
      this.form.hospitalNumber = formattedNumber;
      // 清除卡号错误提示
      if (this.errors.hospitalNumber) {
        this.$set(this.errors, "hospitalNumber", "");
      }
    },

    // 4. 表单验证（提交前详细校验）
    validateForm() {
      const {
        hospitalDeposit,
        hospitalCompany,
        hospitalNumber,
        hospitalBankCode,
      } = this.form;
      const errors = {};

      // 开户行校验
      if (!hospitalDeposit.trim()) {
        errors.hospitalDeposit = "请输入开户行";
      } else if (hospitalDeposit.trim().length > 50) {
        errors.hospitalDeposit = "开户行名称不能超过50个字符";
      }

      // 公司名称校验
      if (!hospitalCompany.trim()) {
        errors.hospitalCompany = "请输入公司名称";
      } else if (hospitalCompany.trim().length > 50) {
        errors.hospitalCompany = "公司名称不能超过50个字符";
      }

      // 卡号校验
      const pureCardNumber = hospitalNumber.trim().replace(/\s/g, "");
      if (!pureCardNumber) {
        errors.hospitalNumber = "请输入银行卡号";
      } else if (!/^\d{16,19}$/.test(pureCardNumber)) {
        errors.hospitalNumber = "请输入16-19位有效银行卡号";
      }

      // 开户行号校验
      if (!hospitalBankCode.trim()) {
        errors.hospitalBankCode = "请输入开户行号";
      }

      // 更新错误提示
      this.errors = errors;
      // 返回是否通过校验（无错误则通过）
      return Object.keys(errors).length === 0;
    },

    // 5. 提交表单
    // 5. 提交表单
    handleSubmit() {
      // 先执行表单验证，避免无效提交（原代码遗漏，建议补充）
      if (!this.validateForm()) {
        return;
      }

      this.isSubmitting = true; // 补充提交中状态，避免重复点击（原代码遗漏，建议补充）

      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        hospitalId: data.nurseUid, // 医院ID
        hospitalDeposit: this.form.hospitalDeposit, // 开户行
        hospitalCompany: this.form.hospitalCompany, // 公司名称
        hospitalNumber: this.form.hospitalNumber.replace(/\s/g, ""), // 卡号（去除空格）
        hospitalBankCode: this.form.hospitalBankCode, // 开户行号
      };
      console.log("提交参数", param);

      nurseInfo
        .addBank(param)
        .then((result) => {
          console.log("添加结果", result);
          uni.showToast({
            title: "银行卡添加成功",
            icon: "success",
            duration: 1000,
            success: () => {
              setTimeout(() => {
                // 核心修改：返回上一级页面
                uni.navigateBack({
                  delta: 1,
                });
              }, 1000);
            },
          });
        })
        .catch((error) => {
          // 补充错误处理，提升用户体验（原代码遗漏，建议补充）
          uni.showToast({
            title: "添加失败，请重试",
            icon: "none",
            duration: 1000,
          });
          console.error("添加银行卡失败", error);
        })
        .finally(() => {
          // 无论成功/失败，都重置提交状态（原代码遗漏，建议补充）
          this.isSubmitting = false;
        });
    },
  },
  // },
};
</script>

<style scoped>
/* 页面容器：适配安全区，最小高度全屏 */
.add-card-container {
  background-color: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 标题栏：微信风格，左返回+中标题 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
}

.back-btn {
  font-size: 36rpx;
  color: #333333;
  cursor: pointer;
}

.header-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333333;
}

.empty-btn {
  width: 36rpx;
  /* 与返回按钮宽度一致，保持标题居中 */
}

/* 表单容器：上下留白，适配不同屏幕 */
.card-form {
  padding: 40rpx 30rpx;
}

/* 表单项：垂直间距+下划线风格 */
.form-item {
  margin-bottom: 40rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 12rpx;
}

.input-wrapper {
  position: relative;
}

.form-input {
  width: 100%;
  height: 60rpx;
  font-size: 32rpx;
  color: #333333;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

/* 输入框占位符样式 */
.form-input::placeholder {
  color: #cccccc;
  font-size: 30rpx;
}

/* 辅助文本（如开户行号提示） */
.helper-text {
  position: absolute;
  right: 0;
  bottom: -24rpx;
  font-size: 22rpx;
  color: #999999;
}

/* 错误提示：红色+小字体 */
.error-tip {
  display: block;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #ff3b30;
}

/* 提交按钮：微信绿+圆角+固定高度 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #07c160;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 20rpx;
}

/* 禁用状态按钮样式 */
.submit-btn[disabled] {
  background-color: #9be1b8 !important;
  color: #ffffff !important;
}

/* 媒体查询：超窄屏适配（如小屏手机） */
@media (max-width: 320px) {
  .card-form {
    padding: 30rpx 20rpx;
  }

  .form-input {
    font-size: 30rpx;
  }

  .submit-btn {
    height: 80rpx;
    font-size: 30rpx;
  }
}

/* 超宽屏适配（如平板） */
@media (min-width: 768px) {
  .page-header {
    height: 120rpx;
  }

  .form-item {
    margin-bottom: 50rpx;
  }

  .form-input {
    height: 80rpx;
    font-size: 36rpx;
  }

  .submit-btn {
    height: 110rpx;
    font-size: 36rpx;
    border-radius: 55rpx;
  }
}
</style>
